<template>
  <div class="app-container">
    <div class="search_container_warp">
      <el-form class="search_container" :inline="true">
        <el-form-item>
          <el-button type="primary" @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never" class="examDetailsClass customTableClass">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="学校名称：">
            {{ formData.schoolName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label=" 学校队号：">
            {{ formData.teamNumber }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号：">
            {{ formData.stuIdCard }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="考试姓名：">
            {{ formData.stuName }}
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="titleClass">考试试卷</h4>

      <el-row :gutter="24">
        <el-col :span="6" class="fz20"
          >考试成绩：<span class="scoreClass">{{ formData.score }}</span>
          分</el-col
        >
        <el-col :span="6" class="colClass col1"
          >正确：{{ formData.rightNumber }}</el-col
        >
        <el-col :span="6" class="colClass col2"
          >错误：{{ formData.wrongNumber }}</el-col
        >
        <el-col :span="6" class="colClass col3"
          >未做：{{ formData.unfinishedNumber }}</el-col
        >
      </el-row>

      <ul class="subjectWrapClass">
        <li
          class="subjectClass"
          :key="index"
          v-for="(item, index) in questionsList"
        >
          <div class="subjectTitle">
            {{ index + 1 }}、<span class="colorClass"
              >({{ item.questionTypeName }})
            </span>
            {{ item.questionContent }}
          </div>
          <div class="subjectAnswer">
            <span class="bgColorClass">A</span> {{ item.optionA }}
          </div>
          <div class="subjectAnswer">
            <span class="bgColorClass">B</span> {{ item.optionB }}
          </div>
          <div class="subjectAnswer" v-if="item.questionTypeName !== '判断题'">
            <span class="bgColorClass">C</span> {{ item.optionC }}
          </div>
          <div class="subjectAnswer" v-if="item.questionTypeName !== '判断题'">
            <span class="bgColorClass">D</span> {{ item.optionD }}
          </div>
          <div>
            我的答案：<span :class="myAnswerClass(item)">{{
              item.myAnswer
            }}</span>
            <span class="referenceAnswerClass"
              >参考答案：<span class="color2Class">{{
                item.answer
              }}</span></span
            >
          </div>
          <div v-if="item.analysis">题目分析：{{ item.analysis }}</div>
          <div v-if="item.questionPhoto" class="questionPhotoClass">
            <span class="leftClass"> 题目附件：</span>
            <span class="rightClass"
              ><Custom-Upload
                :disabled="true"
                :onlyShow="true"
                :url="item.questionPhoto"
                :name="filename(item)"
            /></span>
          </div>
        </li>
      </ul>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { getExamDetails } from "@/api/examProgress";
import { Options, ItemForm } from "@/api/examProgress/types";
import { computeHeiht } from "@/utils/index";
const router = useRouter();
const route = useRoute();

defineOptions({
  name: "ExamPapersDetails",
  inheritAttrs: false,
});

const questionsList = ref<any[]>([]);
const options = ref<Options[]>([]);
const loading = ref(false);

const formData = reactive<any>({});

const myAnswerClass = computed(() => (data: any) => {
  return data.myAnswer === data.answer ? "correctClass" : "wrongClass";
});
const filename = computed(() => (data: any) => {
  return data.questionPhoto.split("photo/")[1];
});

// 题目类型
options.value = [
  {
    label: "单选题",
    value: 1,
  },
  {
    label: "多选题",
    value: 2,
  },
  {
    label: "判断题",
    value: 3,
  },
];

function goBack() {
  router.back();
}

onMounted(() => {
  computeHeiht(70);

  loading.value = true;
  getExamDetails({ id: route.query.id })
    .then(({ data }) => {
      const {
        rightNumber,
        schoolName,
        score,
        stuIdCard,
        stuName,
        teamNumber,
        unfinishedNumber,
        wrongNumber,
        questions,
      } = data;
      formData.rightNumber = rightNumber;
      formData.schoolName = schoolName;
      formData.score = score;
      formData.stuIdCard = stuIdCard;
      formData.stuName = stuName;
      formData.teamNumber = teamNumber;
      formData.unfinishedNumber = unfinishedNumber;
      formData.wrongNumber = wrongNumber;

      questions.forEach((v: any) => {
        v.questionTypeName = options.value.find(
          (j) => j.value === v.questionType
        )?.label;
      });
      questionsList.value = questions;
    })
    .finally(() => {
      loading.value = false;
    });
});
</script>
<style lang="scss" scoped>
.examDetailsClass {
  overflow: auto;
  padding-left: 60px;
  padding-right: 20px;
  margin-bottom: 0;

  :deep(.el-form-item__label),
  :deep(.el-form-item__content) {
    height: 32px;
    line-height: 32px;
    font-size: 18px;
    color: #2474f3;
    font-weight: 700;
  }
  .titleClass {
    text-align: center;
    font-size: 18px;
    color: #666666;
    margin-top: 0;
  }
  .fz20 {
    font-size: 20px;
  }
  .scoreClass {
    color: #0000ff;
  }
  .colClass:before {
    width: 12px;
    height: 12px;
    content: " ";
    background: #5fd0af;
    display: inline-block;
    border-radius: 50%;
    margin-right: 4px;
  }
  .colClass.col2:before {
    background: #ff605d;
  }
  .colClass.col3:before {
    background: #dddddd;
  }
  .subjectClass > div {
    margin-left: 26px;
    margin-bottom: 10px;
  }
  .subjectClass {
    border-bottom: 1px solid #eee;
    margin-top: 10px;
    .subjectTitle {
      margin-left: 0;
    }
  }

  .subjectWrapClass {
    margin-top: 10px;
    font-size: 14px;
  }
  .colorClass {
    color: #409eff;
  }
  .color2Class {
    color: #5fd0af;
  }
  .bgColorClass {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    background: #ff605d;
    text-align: center;
    color: #fff;
    font-size: 14px;
  }
  .correctClass {
    color: #5fd0af;
  }
  .wrongClass {
    color: #ff605d;
  }
  .referenceAnswerClass {
    margin-left: 16px;
  }
  .questionPhotoClass {
    overflow: hidden;
    .leftClass {
      float: left;
    }
    .rightClass {
      float: left;
      width: 500px;
    }
  }
}
</style>
